<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>H+ 退款列表</title>
		<link rel="shortcut icon" href="../content/static/img/favicon.ico">
		<link href="../content/css/common_modal.css" rel="stylesheet">
		<link href="../content/static/css/font-awesome.min.css?v=4.4.0" rel="stylesheet">
		<link href="../content/js/lib/vue/select2.min.css" rel="stylesheet">
		<link href="../content/static/css/bootstrap.min.css?v=3.3.5" rel="stylesheet">
		<link href="../content/static/css/plugins/chosen/chosen.css" rel="stylesheet">
		<link href="../content/js/lib/calendar/calendar.css" rel="stylesheet">
		<link href="../content/js/lib/calendar/scrollbar.css" rel="stylesheet">
		<link href="../content/static/css/style.min.css?v=4.0.0" rel="stylesheet">
		<link href="../content/static/js/plugins/bootstrap-fileinput/css/fileinput.css" media="all" rel="stylesheet" />
		<style>
			.fa-female:before {
            color: #fb7cd5;
        }
        .fa-location-arrow:before {
            color: rebeccapurple;
        }
        .fa-mobile-phone:before, .fa-mobile:before{
            color: black;
        }
        .fa-map-marker:before {
            color: #1ab394;
        }
		.table{
			margin-bottom: 0px;
		}
        .table-th{
            font-size: 12px;
            font-family: tahoma, "Microsoft YaHei", "Hiragino Sans GB", Arial, sans-serif;
            line-height: 1.42857143;
            color: #333;
            background-color: #f5f5f5;
        }
        table tr{ height:40px;}
        .bill-tips>li{
            margin-top: 20px;
        }
    </style>
	</head>

	<body class="content-container">
		<div class="wrapper wrapper-content animated fadeInRight">
			<div class="row">
				<div class="ibox float-e-margins">
					<div class="ibox-title">
						<ol class="breadcrumb">
							<li><a>订单管理</a></li>
							<li><a>订单退款列表</a></li>
						</ol>
					</div>
					<div class="content-wrapper">
						<div class="search-condition">
							<div>
								<div class="filter-wrapper">
									<ul class="clearfix">
										<li class="filter-item ">
											<label>订单单号</label>
											<div>
												<div class="fill-wrapper">
													<input id="serialNumber" type="text" class="fill-item">
												</div>
											</div>
										</li>
										<li class="filter-item ">
											<label>下单用户</label>
											<div>
												<div class="fill-wrapper">
													<input id="serialNumber" type="text" class="fill-item">
												</div>
											</div>
										</li>
										<li class="filter-item ">
											<label>下单日期</label>
											<div>
												<div class="fill-wrapper fill-wrapper-auto">
													<input id="costTimeStart" type="text" class="fill-item timeChoose  revision-time" readonly="readonly">
												</div>
												<div class="fill-desc">到</div>
												<div class="fill-wrapper fill-wrapper-auto">
													<input id="costTimeEnd" type="text" class="fill-item timeChoose  revision-time" readonly="readonly">
												</div>
											</div>
										</li>
										<li class="filter-item ">
											<label>联系电话</label>
											<div>
												<div class="fill-wrapper">
													<input id="serialNumber" type="text" class="fill-item">
												</div>
											</div>
										</li>
										<li class="filter-item ">
											<label>订单状态</label>
											<div>
												<select v-select2 id="accounts">
													<option value='0'>全部</option>
													<option value='0'>已退款</option>
													<option value='0'>待审核</option>
													<option value='0'>已拒绝</option>
												</select>
											</div>
										</li>
										<li class="filter-item">
											<a class="revision-btn revision-btn-search">搜索</a>
											<a href="javascript:;" class="more">更多<i class="revision-icon-more"></i></a>
										</li>
									</ul>
								</div>
							</div>
						</div>
						<div class="col-sm-12" style="padding: 12px 0px 12px 0px;">
							<div class="alert alert-info" style="margin-bottom: 0px">
								<a class="revision-btn" v-on:click="exportShow()">导出列表</a>&nbsp;&nbsp;
								<span>总条数：<span>12 条</span></span>
							</div>
						</div>
						<table class="table table-hover table-bordered">
							<thead style="background: #f5f5f5;">
								<tr>
									<th><input class="revision-checkbox" type="checkbox"></th>
									<th>下单客户</th>
									<th>联系电话</th>
									<th>商品数量</th>
									<th>退款金额</th>
									<th>退款状态</th>
									<th>申请日期</th>
									<th>所属团</th>
									<th>操作</th>
								</tr>
							</thead>
							<tbody>
								<tr>
									<td>
									    <input class="revision-checkbox" type="checkbox">
									</td>
									<td>王超</td>
									<td>12343233341</td>
									<td>2</td>
									<td>￥430</td>
									<td class="amount">
										待审核
									</td>
									<td>2019-09-01</td>
									<td>尹山湖团</td>
									<td>
										<a href="javascript:;" v-on:click="detailShow(1)">详情</a>
									</td>
								</tr>
								<tr>
									<td>
									    <input class="revision-checkbox" type="checkbox">
									</td>
									<td>王超</td>
									<td>12343233341</td>
									<td>3</td>
									<td>￥480</td>
									<td class="amount">
										已退款
									</td>
									<td>2019-09-01</td>
									<td>尹山湖团</td>
									<td>
										<a href="javascript:;" v-on:click="detailShow(1)">详情</a>
									</td>
								</tr>
							</tbody>
						</table>
					</div>
				</div>
				<div style="display: none;" v-show="pageInit">
					<!-- 日常收支 -->
					<modal v-bind:show.sync="detailModal.show" v-bind:style="detailModal .style" v-bind:add-class="detailModal.addClass">
						<h4 slot="header">退款详情</h4>
						<div slot="body" class="clearfix">
							<div>
								<h3 class="panel-title">退款基本信息</h3>
							</div>
							<ul class="bill-tips clearfix" style="margin-top: -15px;">
								<li>
									<em>所属订单</em>
									<span>SRD20181220005</span>
								</li>
								<li>
									<em>退款商品种类</em>
									<span>2种</span>
								</li>
								<li>
									<em>退款总金额</em>
									<span>￥290</span>
								</li>
								<li>
									<em>申请日期</em>
									<span>2019-09-03 12:33:45</span>
								</li>
								<li >
									<em>订单状态</em>
									<span class="amount">已完成</span>
								</li>
							</ul>
							<div>
								<h3 class="panel-title">客户基本信息</h3>
							</div>
							<ul class="bill-tips clearfix" style="margin-top: -15px;">
								<li>
									<em>联系人</em>
									<span>王老板</span>
								</li>
								<li>
									<em>联系电话</em>
									<span>15606216623</span>
								</li>
							</ul>
							<div>
								<h3 class="panel-title">团信息</h3>
							</div>
							<ul class="bill-tips clearfix" style="margin-top: -15px;">
								<li>
									<em>团名称</em>
									<span>尹山湖分团</span>
								</li>
								<li>
									<em>团长</em>
									<span>王超</span>
								</li>
								<li>
									<em>电话</em>
									<span>15502334878</span>
								</li>
								<li>
									<em>团地址</em>
									<span>工业园区尹山湖</span>
								</li>
							</ul>
							<div>
								<h3 class="panel-title">退款商品详情</h3>
							</div>
							<table class="table table-hover table-bordered" style="margin-top: 15px;">
								<thead style="background: #f5f5f5;">
									<tr>
										<th>名称</th>
										<th>分类</th>
										<th>规格</th>
										<th>数量</th>
										<th>价格</th>
									</tr>
								</thead>
								<tbody>
									<tr>
										<td>哈密瓜</td>
										<td>水果</td>
										<td>特甜</td>
										<td>5(斤)</td>
										<td>￥90</td>
									</tr>
									<tr>
										<td>菜刀</td>
										<td>厨具</td>
										<td>厨房专用</td>
										<td>5(把)</td>
										<td>￥100</td>
									</tr>
								</tbody>
							</table>
						</div>
					</modal>
				</div>
			</div>
		</div>
		<script src="../content/js/lib/vue/vue.min.js"></script>
		<script src="../content/static/js/jquery.min.js?v=2.1.4"></script>
		<script src="../content/static/js/bootstrap.min.js?v=3.3.5"></script>
		<script src="../content/static/js/plugins/chosen/chosen.jquery.js"></script>
		<script src="../content/static/js/plugins/bootstrap-table/bootstrap-table.min.js"></script>
		<script src="../content/static/js/content.min.js?v=1.0.0"></script>
		<script src="../content/js/lib/calendar/calendar.js"></script>
		<script src="../content/js/lib/calendar/scrollbar.js"></script>
		<script src="../content/static/js/plugins/bootstrap-fileinput/js/fileinput.js"></script>
		<script src="../content/static/js/plugins/bootstrap-fileinput/js/plugins/sortable.js"></script>
		<script src="../content/static/js/plugins/bootstrap-fileinput/js/locales/zh.js"></script>
		<script src="../content/js/lib/vue/vue-modal.js"></script>
		<script src="../content/js/lib/vue/vue-pagination.js"></script>
		<script src="../content/js/common.js"></script>
		<script src="../content/js/lib/vue/select2.js"></script>
		<script type="text/javascript">
			$(function() {
				$('#file-es').fileinput({
					language: 'zh',
					uploadUrl: '#',
					allowedFileExtensions: ['jpg', 'png', 'gif']
				});
				//时间验证
				var calObj = new $.Calendar({
					//time: true,
					skin: 'white'
				});

				$('#costTimeStart').focus(function() {
					var $this = $(this),
						val = $this.val(),
						endTime = $('#costTimeEnd').val();
					calObj.pick({
						elem: this,
						endDate: endTime
					});
				});
				$('#costTimeEnd').focus(function() {
					var $this = $(this),
						val = $this.val(),
						startTime = $('#costTimeStart').val();
					calObj.pick({
						elem: this,
						startDate: startTime
					});
				});
			});
			$("#accounts").select2({
				width: "220px"
			});
			$("#comeType").select2({
				width: "220px"
			});
			$("#status").select2({
				width: "220px"
			});
			$("#approveStatus").select2({
				width: "220px"
			});
			var vmData = {
				detailModal: {
					show: false,
					style: {
						width: '60%',
						height: "auto"
					},
					addClass: 'scroll-modal',
					func: {
						type: Function
					},
					close: function() {
						vm.detailModal.show = false;
					}
				},
				modelTitle: "",
				approveStatusList: [{
						"Text": "全部",
						"Value": "553",
					},
					{
						"Text": "待项目经理审批",
						"Value": "553",
					},
					{
						"Text": "待CEO审批",
						"Value": "553",
					},
					{
						"Text": "待A仓Leader审批",
						"Value": "553",
					},
					{
						"Text": "待B仓Leader审批",
						"Value": "553",
					},
					{
						"Text": "待销售经理审批",
						"Value": "553",
					},
				],
				backStatusList: [{
						"Text": "全部",
						"Value": "553",
					},
					{
						"Text": "未归还",
						"Value": "360",
					}, {
						"Text": "已归还",
						"Value": "365",
					},
					{
						"Text": "转销售",
						"Value": "4105",
					}
				],
				warehouseList: [{
						"Text": "北京",
						"Value": "553",
					},
					{
						"Text": "上海",
						"Value": "360",
					}, {
						"Text": "大西洋大西洋大西洋大西洋大西洋大西洋大西洋",
						"Value": "365",
					},
					{
						"Text": "广州",
						"Value": "4105",
					}, {
						"Text": "北冰洋",
						"Value": "510",
					},
					{
						"Text": "深圳",
						"Value": "3219",
					},
					{
						"Text": "天津",
						"Value": "99402",
					},
					{
						"Text": "合肥",
						"Value": "519",
					},
					{
						"Text": "苏州",
						"Value": "518",
					},
					{
						"Text": "南京",
						"Value": "517",
					},
					{
						"Text": "无锡",
						"Value": "525",
					},
					{
						"Text": "大东北",
						"Value": "528",
					},
					{
						"Text": "大西北",
						"Value": "533",
					},
					{
						"Text": "非洲",
						"Value": "538",
					},
					{
						"Text": "欧洲",
						"Value": "537",
					},
					{
						"Text": "南美洲",
						"Value": "536",
					}
				],
				modelFlag: 0,
				selectProductItem: [],
				accountList: [{
					"Text": "中国银行",
					"Value": "1",
				}, {
					"Text": "建设银行",
					"Value": "2",
				}, {
					"Text": "农业银行",
					"Value": "3",
				}, {
					"Text": "工商银行",
					"Value": "4",
				}, {
					"Text": "现金",
					"Value": "5",
				}, ],
			};
			vmData = $.extend(vmData, baseData);
			var vmMothod = {
				init: function() {},
				approvalShow: function() {
					vm.approvalModal.show = true;
				},
				detailShow: function() {
					vm.detailModal.show = true;
				},
				pruchShow: function(obj) {
					vm.pruchModal.show = true;
					$("#backStatus").select2({
						width: "160px"
					});
					$("#backStatus").val('').trigger('change'); //初始化
				},
				addShow: function() {
					vm.addModal.show = true;
					$("#incomeType").select2({
						width: "187px"
					});
					$("#incomeType").val('').trigger('change'); //初始化
					$("#accountType").select2({
						width: "187px"
					});
					$("#accountType").val('').trigger('change'); //初始化
					$("#account").select2({
						width: "187px"
					});
					$("#account").val('').trigger('change'); //初始化
				},
				productChooseClick: function(e) {
					if (e.checked) {
						vm.productChooseList.forEach(function(a, v) {
							if (a.Id = v.Id)
								vm.productChooseList.splice(v, 1);
						});
					} else {
						vm.productChooseList.push(e);
					}
				},
			};
			vmMothod = $.extend(vmMothod, baseCommonFunction);
			var vm = new Vue({
				el: '.content-container',
				data: vmData,
				methods: vmMothod
			});
			vm.init();
		</script>
	</body>

</html>
